<template>
  <el-dialog title="模板签名" :visible.sync="dialogVisible" width="60%" append-to-body :before-close="handleClose"
    :close-on-click-modal="false" :close-on-press-escape="false">
    <div @wheel="goWheel">
      <el-carousel :autoplay="false" trigger="click" type="card" @change="carouselChange" height="200px"
        ref="slideCarousel">
        <el-carousel-item v-for="(item, index) in templateList" :key="index">
          <div class="template-li">
            <el-image style="width: 100px; height: 100px" :src="item.sign" :preview-src-list="srcList">
            </el-image>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <template #footer>
      <el-button type="info" @click="handleClose"> 取 消 </el-button>
      <el-button type="primary" @click="confirm" :loading="loading"> 确 认 </el-button>
    </template>
  </el-dialog>
</template>

<script>
import _ from "lodash";

export default {
  name: "WorkspaceJsonTemplatesign",

  props: {
    value: {
      type: [Boolean],
      default: false,
    },
    modalData: {
      type: [Object],
      default: () => {
        return {};
      },
    },
    isUpdata: {
      type: [Boolean],
      default: false,
    },
  },

  inject: ["designerConfig"],

  data() {
    return {
      signValue: {
        text: "",
        img: "",
      },
      templateList: [],
      activeKey: 0,
      dialogVisible: false,
      swiper: null,
      loading: false,
      userInfo:
        window.sessionStorage.getItem("userInfo") &&
        JSON.parse(window.sessionStorage.getItem("userInfo")),
    };
  },

  computed: {
    injectConfig() {
      return this.designerConfig();
    },
    srcList() {
      return this.templateList.map((item) => {
        return item.sign;
      });
    },
  },

  watch: {
    value(n) {
      if (this.isUpdata) {
        this.signValue = _.cloneDeep(this.modalData);
      } else {
        this.signValue = {};
      }
      this.dialogVisible = n;
      if (n) {
        this.init();
      }
    },
  },

  mounted() { },

  methods: {
    init() {
      this.getMyElectronicSignList();
    },
    carouselChange(val) {
      this.activeKey = val;
    },
    handleClose() {
      this.$emit("input", false);
    },
    confirm() {
      this.signValue.img = this.srcList[this.activeKey];
      this.$emit("confirm", this.signValue);
    },
    // 获取我得电子签名
    getMyElectronicSignList() {
      this.loading = true
      this.API.getSignTemplateList({ type: "TEMPLATE" }).then(async (res) => {
        const { data } = res;
        if (data) {
          this.templateList = data;
        }
      }).finally(() => {
        this.loading = false
      });
    },

    goWheel(event) {
      console.log(event);
      if (event.deltaY > 0 && this.one == true) {
        //data中定义one为true 当one为true时执行
        this.$refs.slideCarousel.next(); //以此来控制每次轮播图切换的张数
        this.one = false;
        setTimeout(() => {
          this.one = true;
        }, 1000);
      }

      if (event.deltaY < 0 && this.one == true) {
        this.$refs.slideCarousel.prev();
        this.one = false;
        setTimeout(() => {
          this.one = true;
        }, 1000);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .el-carousel__container {
  touch-action: pan-x;
  touch-action: pan-y;
}

.template-li {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin: 20px;
}

.template-li.active {
  background-color: #67c23a;
}

.add-btn {
  margin: 20px 0 0;
  text-align: right;
}
</style>
